<template>
    <div>
        <van-dialog :show="show" title="" show-cancel-button @cancel="handleCancle" @confirm="handleConfirm">
            <div class="inner">
                <div class="tit">绑定您的手机号</div>
                <van-field v-model="phone" class="inputinfo" placeholder="请输入手机号" type="number" />
            </div>
        </van-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { showToast } from 'vant';
interface Props {
    show: boolean

}
const props = withDefaults(defineProps<Props>(), {
    show: false,

})
const emit = defineEmits(["cancel", "confirm", 'beforeClose'])
const phone = ref('')

const handleCancle = () => {
    phone.value = ''
    emit('cancel')
}
const handleConfirm = () => {
    if (!phone.value || !/^1[3456789]\d{9}$/.test(phone.value)) {
        showToast({
            message: '请输入正确手机号',
            position: 'top',
        });

        return
    }
    emit('confirm', phone.value)
}

</script>
<style lang="scss" scoped>
.inner {
    padding: 20px 20px;

    .tit {
        color: #999;
        margin-bottom: 10px;
    }

    .inputinfo {
        border: 1px solid #ededed;
        border-radius: 4px;
        padding: 5px 10px;
    }
}
</style>